<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="container"></div>

<body>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.35/dist/g2.min.js"></script>
    <script>

        // 柱状图
        const data = [
            { genre: 'Sports', sold: 275 },
            { genre: 'Strategy', sold: 115 },
            { genre: 'Action', sold: 120 },
            { genre: 'Shooter', sold: 350 },
            { genre: 'Other', sold: 150 },
        ];

        // Step 1: 创建 Chart 对象
        const chart = new G2.Chart({
            container: 'container', // 指定图表容器 ID
            width: 600, // 指定图表宽度
            height: 300, // 指定图表高
        });
        // Step 2: 载入数据源
        chart.data(data);
        chart.scale('sold', {
            alias: '数量',
        });
        // Step 3: 创建图形语法，绘制柱状图 
        chart.interval().position('genre*sold');

        // Step 4: 渲染图表
        chart.render();
    </script>
</body>

</html>